<!-- 动态表单

    根据传入的json数组，按顺序自动生成表单；
    表达支持设置动态验证功能；


    1.该表单可提供的功能列表
    （1） input 输入框；（2） select 下拉选择； （3） checkbox 多选框；
    （4） radio 单选；（5） textarea 多行文本输入框；
    2.可设置参数
    placeholder（提示）、rules（规则）、label、defaultValue;


-->

<script setup>
// 组件导入
// 输入框
import formInput from "./form-input.vue";
// 单选框
import formRadio from "./form-radio.vue";
// 备注栏
import formTextarea from "./form-textarea.vue";
// -------------------------------------------------------------------
// #导出vue方法
import { ref, defineProps, defineEmits, onMounted } from "vue";

// -------------------------------------------------------------------
const props = defineProps({
	/* 
        [
            {
                type: "input",
                label: "昵称",
                key: "gender",
                options: ['男','女']
            }
        ]
    */
	formData: Array,
});

// 渲染列表
const formList = ref([]);

onMounted(() => {
	CreateFormList(props.formData);
});

// 创建列表
const CreateFormList = (arr) => {
	let res = [];

	arr.forEach((box) => {
		res.push({
			...box,
			value: "",
		});
	});

	formList.value = [...res];
};

// 输出表单数据
const OutputFormData = () => {
	const arr = formList.value;
	arr.forEach((box) => {
		console.log(`${box.label}=${box.value}`);
	});
};
</script>

<template>
	<div class="dynamic-form">
		<!-- 动态内容区 -->
		<div class="form-content">
			<div
				class="form-item"
				v-for="(box, index) in formList"
				:key="index"
			>
				<formInput
					v-if="box.type == 'input'"
					v-model:modelValue="box.value"
					:label="box.label"
					:placeholder="box.placeholder"
					:warningTxt="box.warningTxt"
					:rules="box.rules"
				/>
				<formRadio
					v-if="box.type == 'radio'"
					v-model:modelValue="box.value"
					:label="box.label"
					:placeholder="box.placeholder"
					:warningTxt="box.warningTxt"
					:rules="box.rules"
					:options="box.options"
				/>
				<formTextarea
					v-if="box.type == 'textarea'"
					:label="box.label"
					v-model:modelValue="box.value"
					:placeholder="box.placeholder"
					:warningTxt="box.warningTxt"
					:rules="box.rules"
				/>
			</div>
		</div>

		<!-- 固有模块 -->
		<div class="inherent-module">
			<!-- 提交按钮 -->
			<div class="form-btn" @click="OutputFormData">提交</div>
		</div>
	</div>
</template>

<style lang="less" src="./dynamic-form.less"></style>
